<!--
@description ：页面描述
-->

<template>
  <div style="padding: 10px; overflow-y: auto" v-loading="pageLoading">
    <div class="header-btn">
      <div>名片设置</div>
      <div>
        <el-button type="primary" @click="confirm" :loading="loading">保存并发布</el-button>
        <el-button type="info" plain @click="cancel">取消</el-button>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8" style="background: #fff;border-radius: 8px;">
        <div class="show">
          <div class="info">
            <div class="info-list-item info-header">
              <i class="el-icon-close"></i>
              <span style="display: inline-block">名片</span>
              <i class="el-icon-more"></i>
            </div>
            <div class="info-top info-list-item">
              <div class="info-avatar">
                <div v-if="!configForm.avatar" class="avatar">{{ configForm.name ? configForm.name.slice(-1) : '' }}</div>
                <div v-if="configForm.avatar" class="avatar">
                  <img :src="configForm.avatar" alt="" style="width: 100%;height: 100%">
                </div>
                <div class="standing">
                  <div class="nameAndPosition">
                    <span class="name" v-if="configForm.name">{{ configForm.name }}</span>
                    <span class="positionInfo" v-if="configForm.position">{{ configForm.position }}</span>
                  </div>
                  <div class="corporation" v-if="configForm.corporation">{{ `@${configForm.corporation}` }}</div>
                </div>
              </div>
              <div class="mobile info-list-item" v-if="configForm.mobile">电话:&emsp;{{ configForm.mobile }}</div>
              <div class="address info-list-item" v-if="configForm.address">地址:&emsp;{{ configForm.address }}</div>
            </div>
            <div class="info-list-item info-btn">
              <div class="info-btn-item">
                <i class="el-icon-mobile"></i>&emsp;打电话
              </div>
              <div class="info-btn-item" style="border-left: 1px dashed #ccc">
                <div class="info-btn-item">
                  <i class="el-icon-user-solid"></i>&emsp;加微信
                </div>
              </div>
            </div>
            <div class="person">
              <div class="person-title">个人介绍</div>
              <div class="introduce" v-if="configForm.introduce">{{ configForm.introduce }}</div>
              <div v-if="configForm.label" class="label">
                <el-tag
                  v-for="(tag,index) in configForm.label"
                  :key="index"
                  v-show="tag"
                  :disable-transitions="false"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16" class="rightForm">
        <el-form :model="configForm" ref="configForm" :rules="configRules" label-suffix=":" label-position="left" label-width="80px" style="margin:14px 0 0 20px">
          <el-form-item prop="avatar" label="头像" class="moreHeightItem">
            <el-select v-model="configForm.avatarCheck" style="width: 200px" @change="avatarCheckChange">
              <el-option label="使用个人头像" value="1" :key="1"></el-option>
              <el-option label="自定义头像" :value="2" :key="2"></el-option>
            </el-select>
            <div v-if="configForm.avatarCheck == '1'" class="showAvatar">{{ configForm.name ? configForm.name.slice(-1) : '' }}</div>
            <div v-if="configForm.avatarCheck == '2'" class="avatarUpload">
<!--              <img :src="configForm.avatar" alt="" style="width: 100%;height: 100%">-->
              <el-upload class="avatar-uploader1" style="width: 100%;height: 100%" action :show-file-list="false" :before-upload="beforeUpload">
                <i v-if="!configForm.avatar" class="el-icon-plus avatar-uploader-icon"></i>
                <el-image v-else style="width: 66px; height: 66px" fit="contain" :src="configForm.avatar"></el-image>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item prop="name" label="姓名">
<!--            <el-select v-model="configForm.nameCheck" style="width: 200px;">-->
<!--              <el-option label="使用个人姓名" value="1" :key="1"></el-option>-->
<!--            </el-select>-->
            <el-input v-model="configForm.name" style="width: 412px"></el-input>
          </el-form-item>
          <el-form-item prop="position" label="职位">
            <el-input v-model="configForm.position" clearable style="width: 412px" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item prop="corporation" label="公司">
<!--            <el-select v-model="configForm.corporationCheck" style="width: 200px;">-->
<!--              <el-option label="使用公司名称" value="1" :key="1"></el-option>-->
<!--            </el-select>-->
            <el-input v-model="configForm.corporation" style="width: 412px"></el-input>
          </el-form-item>
          <el-form-item prop="qrCode" label="企业微信">
            <el-switch v-model="configForm.qrCode" style="margin-top: 7px"></el-switch>
          </el-form-item>
          <el-form-item prop="mobile" label="手机">
<!--            <el-select v-model="configForm.mobileCheck" style="width: 200px;">-->
<!--              <el-option label="使用个人手机" value="1" :key="1"></el-option>-->
<!--            </el-select>-->
            <el-input v-model="configForm.mobile" style="width: 412px"></el-input>
          </el-form-item>
          <el-form-item prop="address" label="地址">
            <el-input v-model="configForm.address"  maxlength="100" clearable style="width: 412px"></el-input>
          </el-form-item>
          <el-form-item prop="introduce" label="自我介绍">
            <el-input v-model="configForm.introduce" maxlength="300" rows="3" type="textarea" clearable style="width: 412px"></el-input>
          </el-form-item>
          <el-form-item prop="label" label="标签" class="inputList">
            <div v-for="(item,index) in configForm.label" :key="index" class="inputListItem">
              <el-input v-model="configForm.label[index]" maxlength="20"
                        placeholder="请添加标签" style="width: 412px">
              </el-input>
              <i v-if="configForm.label.length != 1" class="el-icon-circle-close conIcon" style="margin-left: 8px"
                 @click="configForm.label.splice(index, 1)"></i>
              <i v-if="index == configForm.label.length - 1" class="el-icon-circle-plus-outline conIcon"
                 style="margin-left: 8px" @click="configForm.label.push('')"></i>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import { uploadFile } from '@/api/article/group'
import * as api from '@/api/callingCard'
import { getWeUserId } from '@/utils/auth'

export default {
  name: "callingCardConfig", //页面名称，必填
  props:{

  },
  components:{

  },
  data(){
    // 手机号码校验
    const validatormobile = (rule, value, callback) => {
      let accountReg1 = /^[0-9]+$/;
      if (!accountReg1.test(value)) {
        callback(new Error("手机号码只能输入数字"));
      }
      if (value.length !== 11) {
        callback(new Error("手机号码位数需为11位"));
      }
      let accountReg = /^[1][3-9][0-9]+$/;
      if (value != "" && !accountReg.test(value)) {
        callback(new Error("手机号码格式错误"));
      }
      callback();
    };
    return{
      loading: false,
      configForm: {
        avatar: '',
        name: '',
        mobile: '',
        address: '',
        corporation: '',
        position: '',
        introduce: '',
        label: [''],

        avatarCheck: '1',
        // nameCheck: '1',
        // corporationCheck: '1',
        // mobileCheck: '1',

        qrCode: false,
      },
      configRules: {
        name: {
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        },
        mobile: { validator: validatormobile, trigger: "blur" },
      },

      pageLoading: false,
    }
  },
  watch:{

  },
  methods:{
    // 保存并发布
    confirm(){
       let obj = {
         ...this.configForm,
         label: this.configForm.label.toString(),
         qrCode: this.configForm.qrCode ? '0' : '1',
         userId: getWeUserId()
       }
       this.$refs.configForm.validate(valid => {
         if(valid){
           this.loading = true
           api.editCard(obj).then(res => {
             console.log('编辑名片::::', res)
             this.$message.success('发布成功')
             this.cancel()
             this.loading = false
           }).catch(() => {
             this.loading = false
           })
         }
       })
    },
    // 取消
    cancel(){
      this.$router.go(-1)
    },

    // 头像切换
    avatarCheckChange(val){
       if(val == '1') this.configForm.avatar = ''
    },

    beforeUpload(data) {
      const formData = new FormData()
      formData.append('file', data)
      uploadFile(formData).then((res) => {
        if (res.code === 200) {
          this.configForm.avatar = res.data.url
          this.$forceUpdate()
        }
      })
      return false
    },

    // 初始化查询详情
    getDetail(){
      this.pageLoading = true
      api.getCardDetail({userId: getWeUserId()}).then((res) => {
           this.configForm = {
             ...res.data,
             label: res.data?.label ? res.data?.label.split(',，') : [''],
             avatarCheck: res.data?.avatar ? '2' : '1',
             qrCode: res.data?.qrCode ? true : false,
           }
           this.pageLoading = false
      }).catch(() => {
        this.pageLoading = false
      })
    },
  },
  mounted() {
    this.getDetail()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>
@import "./common";

@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.rightForm{
  margin-left: 20px;
  width: calc(66% - 20px);
  background: #fff;
  border-radius: 8px;
  min-height: 800px;
}

.showAvatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #082AFF;
  color: #fff;
  font-weight: 600;
  font-size: 28px;
  line-height: 54px;
  text-align: center;
  margin-left: 12px;
}

::v-deep.moreHeightItem{
  line-height: 66px;
  height: 66px;
  .el-form-item__label{
    line-height: 66px;
    height: 66px;
  }
  .el-form-item__content{
    line-height: 66px;
    height: 66px;
  }
}

::v-deep.el-form-item--small.el-form-item{
  padding: 0;
  margin: 0 0 16px 0!important;
}

::v-deep.el-form-item--small .el-form-item__content{
  display: flex;
  align-items: center;
}

::v-deep.inputList .el-form-item__content{
  display: flex!important;
  flex-direction: column!important;
  align-items: start!important;
}

.inputListItem{
  margin-bottom: 8px;
  display: flex;
  align-items: end;
}

.conIcon {
  font-size: 26px;
  cursor: pointer;
  color: #082aff;
}

.avatarUpload{
  width: 66px;
  height: 66px;
  margin-left: 12px;
}

::v-deep.avatar-uploader-icon{
  width: 66px;
  height: 66px;
  line-height: 66px;
  border: 1px dashed #ccc;
}
</style>
